<template>
    <div>
        <div style="margin-bottom:20px;text-align:left;">
          <el-button
          type="text"
          size="mini"
          v-if="orderForm.status == '0'"
          @click="comithander(orderForm)">提交</el-button>
        <el-button
          type="text"
          size="mini"
          v-if="orderForm.status == '1'"
          @click="checkhander(orderForm)">审核</el-button>
          <el-button
          type="text"
          size="mini"
          v-if="orderForm.status == '2'"
          @click="excutehander(orderForm)">执行</el-button>
          <el-button
          type="text"
          size="mini"
          v-if="orderForm.status == '1'||orderForm.status == '2'"
          @click="termhander(orderForm)">终止</el-button>
    </div>
    <el-form
      class="form-wrapper"
      ref="orderForm"
      :model="orderForm"
      :rules="addRules"
      label-width="110px"
    >
      <el-row>
        
        <el-col :span="8">
          <el-form-item label="单据编号">
          <el-input
          :disabled="true"
          style="width:180px;"
            v-model="orderForm.djbh"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="8">
         <el-form-item label="日期">
          <el-date-picker
           :disabled="true"
          style="width:180px;"
            value-format="yyyy-MM-dd"
            v-model="orderForm.rq"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        </el-col>
        <el-col :span="8">
         <el-form-item label="原单据号">
          <el-input
           :disabled="true"
          style="width:180px;"
            v-model="orderForm.ydjh"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        </el-col>
      </el-row>
       <el-row>
      <el-col :span="8">
          <el-form-item label="渠道" prop="qddm">
          <el-select style="width:180px;" v-model="orderForm.qddm" @change="qdchange" filterable clearable placeholder="请选择">
              <el-option
              v-for="item in qdlist"
              :key="item.code"
              :label="item.name+'['+ item.code +']'"
              :value="item.code"
            >
            </el-option>
        </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="8">
         <el-form-item label="门店/客户" prop="khdm">
         <el-select :disabled="!orderForm.qddm" style="width:180px;" v-model="orderForm.khdm" filterable clearable  placeholder="请选择">
              <el-option
              v-for="item in khlist"
              :key="item.code"
              :label="item.name+'['+ item.code +']'"
              :value="item.code"
            >
            </el-option>
        </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="8">
        <el-form-item label="收款类型" prop="sklxDm">
          <el-select  style="width:180px;" v-model="orderForm.sklxDm" clearable filterable placeholder="请选择">
                  <el-option
                  v-for="item in sklxlist"
                  :key="item.code"
                  :label="item.name+'['+ item.code +']'"
                  :value="item.code"
                >
                </el-option>
        </el-select>
        </el-form-item>
        </el-col>
      </el-row>
       <el-row>
      <el-col :span="8">
           <el-form-item label="订货会" prop="dhhdm">
          <el-select style="width:180px;" v-model="orderForm.dhhdm" clearable filterable placeholder="请选择">
               <el-option
                  v-for="item in dhhlist"
                  :key="item.code"
                  :label="item.name+'['+ item.code +']'"
                  :value="item.code"
                >
                </el-option>
        </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="8">
         <el-form-item label="分账信息" prop="fzxx">
          <el-select style="width:180px;" v-model="orderForm.fzxx" clearable filterable placeholder="请选择">
               <el-option
                  v-for="item in fzxxlist"
                  :key="item.code"
                  :label="item.name+'['+ item.code +']'"
                  :value="item.code"
                >
                </el-option>
        </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="8">
         <el-form-item label="单据状态" prop="status">
          <el-select style="width:180px;"  :disabled="true" v-model="orderForm.status" clearable placeholder="请选择">
            <el-option
              v-for="item in orderstatuslist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        </el-form-item>
        </el-col>
      </el-row>
      <div class="buttons-wrap" style="text-align:center">
        <el-button  @click="$router.go(-1)">返回</el-button>
        <el-button type="primary" @click="submitForm('orderForm')">保存</el-button>
      </div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="详细信息" name="first">
          <!-- djbh -->
           <div><el-button type="primary" @click="newadd('1')">新增</el-button></div>
          <el-table
          :data="tableDatadetail"
          style="width: 100%">
           <el-table-column
           label="编号"
          type="index"
          width="50">
          </el-table-column>
          <el-table-column
            prop="je"
            label="应收金额"
            >
             <template slot-scope="scope">{{scope.row.je|NumberSet}}</template>
          </el-table-column>
          <el-table-column
            prop="wsje"
            label="未收金额"
            >
             <template slot-scope="scope">{{scope.row.je - scope.row.ysje |NumberSet}}</template>
          </el-table-column>
          <el-table-column
            prop="ysje"
            label="已收金额">
             <template slot-scope="scope">{{scope.row.ysje|NumberSet}}</template>
          </el-table-column>
          <el-table-column
            prop="bz"
            label="摘要">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
                <el-button
               type="text"
               size="mini"
               @click="toedit('2',scope.row)">编辑</el-button>
               <el-button
               type="text"
               size="mini"
               @click="deletehander(scope.row)">删除</el-button>
                </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: flex-end">
        <el-pagination
          background
          @size-change="sizeChange"
          @current-change="currentChange"
          layout="sizes, prev, pager, next, jumper, ->, total, slot"
          :total="detaildata.total"
        ></el-pagination>
      </div>
        </el-tab-pane>
        <el-tab-pane label="其他信息" name="second"><el-row>
          <el-col :span="12">
            <el-form-item label="创建人：">
                <el-input style="width:180px;" v-model="orderForm.zdr" type="text" :disabled="true"></el-input>
            </el-form-item>
           </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间：">
                <el-input style="width:180px;" v-model="orderForm.zdrq" type="text" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="12">
            <el-form-item label="修改人：">
                <el-input style="width:180px;" v-model="orderForm.xgr" type="text" :disabled="true"></el-input>
            </el-form-item>
           </el-col>
          <el-col :span="12">
            <el-form-item label="修改时间：">
                <el-input style="width:180px;" v-model="orderForm.xgrq" type="text" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="12">
            <el-form-item label="提交人：">
                <el-input style="width:180px;" v-model="orderForm.tjr" type="text" :disabled="true"></el-input>
            </el-form-item>
           </el-col>
          <el-col :span="12">
            <el-form-item label="提交时间：">
                <el-input style="width:180px;" v-model="orderForm.tjrq" type="text" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="12">
            <el-form-item label="审核人：">
                <el-input style="width:180px;" v-model="orderForm.checker" type="text" :disabled="true"></el-input>
            </el-form-item>
           </el-col>
          <el-col :span="12">
            <el-form-item label="审核时间：">
                <el-input style="width:180px;" v-model="orderForm.shrq" type="text" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="12">
            <el-form-item label="终止人：">
                <el-input style="width:180px;" v-model="orderForm.zzr" type="text" :disabled="true"></el-input>
            </el-form-item>
           </el-col>
          <el-col :span="12">
            <el-form-item label="终止时间：">
                <el-input style="width:180px;" v-model="orderForm.zzrq" type="text" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
      </el-row></el-tab-pane>
      </el-tabs>
      <div style="margin:10px;"></div>
      
    </el-form>
    <el-dialog
      :title="diatitle"
      :visible.sync="dialogVisible"
      width="30%"
      append-to-body>
      <el-form label-position="right" label-width="80px" :model="formLabelAlign">
      <el-form-item label="应收金额">
        <el-input v-model.number="formLabelAlign.je" type="number"></el-input>
      </el-form-item>
      <el-form-item label="摘要">
        <el-input v-model="formLabelAlign.bz"></el-input>
      </el-form-item>
    </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toinsert(1,'')">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>
<script>
import { debounce } from "@/utils/sunny"
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    editdata: {
      type: Object
    }
  },
  data() {
    return {
      debounce:debounce,
      diatitle:'新增',
      user: JSON.parse(window.sessionStorage.getItem("user")),
      orderForm:{},
      addRules: {
       qddm: [{ required: true, message: "请选择渠道", trigger: 'change'}],
          khdm:[{ required: true, message: "请选择门店或客户", trigger: 'change'}],
          sklxDm:[{ required: true, message: "请选择收款类型", trigger: 'change'}],
          dhhdm:[{ required: true, message: "请选择订货会", trigger: 'change'}],
          fzxx:[{ required: true, message: "请选择分账信息", trigger: 'change'}],
      },
       orderstatuslist: [
        { value: '0', label: "初始" },
        { value: '1', label: "提交" },
        { value: '2', label: "审核" },
        { value: '3', label: "执行" },
        { value: '5', label: "终止" }
      ],
      qdlist:[],
      khlist:[],
      sklxlist:[],
      dhhlist:[],
      fzxxlist:[],
      activeName:'first',
      tableDatadetail:[],
      detaildata:{
        page:1,
        size:10,
        total:0
      },
      dialogVisible:false,
      formLabelAlign:{
        je:'',
        bz:'',
        djbh:''
      },
      addoedit:'',
      editrow:{}
    };
  },
  created(){
    this.getdata()
    this.getlistQdlist();
    this.getlistsklxlist();
    this.getlistdhhlist();
    this.getlistfzxxlist();
    this.getdetaillist();
    if(this.orderForm.qddm){
      this.firstgetmdkelsit(this.orderForm.qddm)
    }
  },
  methods: {
      comithander:debounce(function(e){
           e.tjr = this.user.name
           this.postRequest('/earnestmoney/djysd/submit/',e).then(res =>{
             if (res.status == "200") {
                // this.getdata();
                this.$store.dispatch('delVisitedViewstogo', this.$route).then((views) => {
                  const latestView = views.slice(-1)[0]
                  if (latestView) {
                    this.$router.push({path:'/djysdDetailView',query: {djbh:this.orderForm.djbh}})
                  } else {
                    this.$router.push('/home')
                  }
                })
                }
        })
      }),
     //  审核
        checkhander:debounce(function(e){
          e.checker = this.user.name
           this.postRequest('/earnestmoney/djysd/check/',e).then(res =>{
             if (res.status == "200") {
                this.getdata();
                }
        })
     }),
       //  执行 
    excutehander:debounce(function(e){
      // e.zdr = this.user.name
      let data = {
        djbh:e.djbh,
        zdr:this.user.name
      }
      this.postRequest('/earnestmoney/djysd/excute/',data).then(res =>{
             if (res.status == "200") {
              //  跳转到最后一个应收单编辑状态     "obj": "DJSQ20200309001"
                if(res.obj){
                  var arr = res.obj.split(',');
                  if(arr.length>0){
                    this.$router.push({path:'/djsqdDetailEdit',query: {djbh:arr[arr.length-1]}})
                  }
                }
                }
        })
    }),
     //  终止
       termhander:debounce(function(e){
          e.zzr = this.user.name
           this.postRequest('/earnestmoney/djysd/term/',e).then(res =>{
             if (res.status == "200") {
                this.getdata();
                }
        })
     }),
     // 获取出去get 初始化
    getdata(){
         this.getRequest(
          "earnestmoney/djysd/get?djbh=" +this.$route.query.djbh
        ).then(res => {
          if (res) {
            // this.tableDataysdjh = res.data;
            this.orderForm = res.obj
            this.firstgetmdkelsit()
            console.log(res,'.............')
          }
        });
    },
      // 获取渠道列表
      getlistQdlist(){
          this.getRequest(
          "/common/getqd?&page=1&size=100"
        ).then(res => {
          if (res) {
            this.qdlist = res.data;
            console.log(res.data)
          }
        });
      },
      // 首次进入是加载 门店客户列表 
      firstgetmdkelsit(e){
        this.getRequest(
          "/common/getmd?&page=1&size=100&qddm="+this.orderForm.qddm
        ).then(res => {
          if (res) {
            this.khlist = res.data;
            console.log(res.data)
          }
        });
      },
      //  获取门店客户 
      qdchange(e){
        this.orderForm.khdm = ''
          this.getRequest(
          "/common/getmd?&page=1&size=100&qddm="+this.orderForm.qddm
        ).then(res => {
          if (res) {
            this.khlist = res.data;
            console.log(res.data)
          }
        });
      },
      // sklxlist  首款类型
      getlistsklxlist(){
          this.getRequest(
          "/earnestmoney/sklx/query?&page=1&size=100"
        ).then(res => {
          if (res) {
            this.sklxlist = res.data;
            console.log(res.data)
          }
        });
      },
     //  订货会
       getlistdhhlist(){
          this.getRequest(
          "/earnestmoney/dhh/query?&page=1&size=100"
        ).then(res => {
          if (res) {
            this.dhhlist = res.data;
            console.log(res.data)
          }
        });
      },
      // 分账信息  getfzxx
      getlistfzxxlist(){
          this.getRequest(
          "/common/getfzxx?&page=1&size=100"
        ).then(res => {
          if (res) {
            this.fzxxlist = res.data;
            console.log(res.data)
          }
        });
      },
      deletehander:debounce(function(e){
        this.$confirm('确认删除本条信息吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/earnestmoney/djysd/detail/delete/'+e.mxbh).then(res =>{
             if (res.status == "200") {
                this.getdetaillist();
                }
         })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        console.log(e)
      }),
      toedit(e,row){
        this.dialogVisible = true
        this.addoedit = e
        this.editrow = JSON.parse(JSON.stringify(row))
        this.formLabelAlign =  this.editrow
         this.diatitle = "编辑"
      },
      newadd(e){
      this.dialogVisible = true
      this.addoedit = e
      this.diatitle = "新增"
      this.formLabelAlign.je=''
      this.formLabelAlign.bz=''
      },
      toinsert(){
        if(this.addoedit == '1'){
          // 1 新增
          
          this.formLabelAlign.djbh = this.orderForm.djbh
         
          this.postRequest(
            "/earnestmoney/djysd/detail/insert",this.formLabelAlign).then(res => {
            if (res) {
                this.getdetaillist()
                this.dialogVisible = false
            }
          });
        }else if(this.addoedit == '2'){
          //2 编辑
         
          this.postRequest(
            "/earnestmoney/djysd/detail/update",this.formLabelAlign).then(res => {
            if (res) {
                this.getdetaillist()
                this.dialogVisible = false
            }
          });
        }
        
       
      },
    
    getdetaillist(){
      console.log(this.tool.pars(this.detaildata))
       this.detaildata.djbh = this.$route.query.djbh
      this.getRequest(
        "/earnestmoney/djysd/detail/query?" +this.tool.pars(this.detaildata)).then(res => {
        if (res) {
          this.tableDatadetail = res.data;
          this.detaildata.total = res.total;
        }
      });
    },
    sizeChange(size) {
      this.detaildata.size = size;
      this.getdetaillist();
    },
    currentChange(page) {
      this.detaildata.page = page;
      this.getdetaillist();
    },
    initForm() {
      this.orderForm = {
        code: "",
        name: "",
        xtmr: "",
        status: "1",
        zdr: "",
        qyr: ""
      };
      if (this.$refs.orderForm) {
        this.$refs.orderForm.resetFields();
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.orderForm);
          this.orderForm.xgr = this.user.name;
          this.postRequest("/earnestmoney/djysd/update", this.orderForm).then(
            res => {
              console.log(res, "11111");
              if (res.status == "200") {
                // this.$parent.getdata();
                this.$router.push({path:'/djysdDetailView',query: {djbh:this.orderForm.djbh}})  
                // this.$emit("update:visible", false);
              }
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancelModal() {
      // 关闭弹窗，触发父组件修改visible值
      this.$emit("update:visible", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.buttons-wrap {
  .el-button {
    margin-right: 20px;
    min-width: 100px;
  }
}
</style>